<template>
  <div ref="chart"></div>
</template>

<script setup>
import { ref, reactive, onMounted, watch } from 'vue'
import * as echarts from 'echarts'
import { get_WeightedScore } from '../../../../api/api';

const props = defineProps({
  selectedStudentId: {
    type: Number,
    required: false,
    default: 1,
  },
});

// 监听 selectedStudentId 的变化并调用 fetchData
watch(() => props.selectedStudentId, (newValue) => {
  if (newValue) {
    fetchData(newValue); // 传递 newValue 到 fetchData
  }
});

// 获取 token
const getToken = () => {
  return localStorage.getItem('pz_token');
};

// 请求数据并更新状态
const fetchData = async (StudentID) => {
  try {
    const token = getToken();

    if (!token) {
      console.error('未找到 Token');
      return;
    }

    if (!StudentID) {
      console.error('无效的 StudentID:', StudentID);
      return;
    }

    // 设置请求头
    const headers = {
      'Authorization': `JWT ${token}`, // 将 token 作为 Bearer Token 传递
    };

    const response = await get_WeightedScore(StudentID, headers);

    const WeightedScore = response.data.data.data; // 这里获取实际的返回数据

    // console.log('WeightedScore:', WeightedScore);  // 打印 classData 的结构

    // 从 sourseNumberData 中提取学年和门数数据
    const academicYears = WeightedScore.map(item => item.AcademicYear);
    const average_all_students = WeightedScore.map(item => item.average_all_students);
    const average_student = WeightedScore.map(item => item.average_student);

    // 更新 ECharts 的配置
    option.xAxis[0].data = academicYears;
    option.series[0].data = average_student;
    option.series[1].data = average_all_students;

    const myChart = echarts.init(chart.value)
    myChart.setOption(option)
    window.addEventListener('resize', () => {
      myChart.resize()
    })
  } catch (error) {
    console.error('获取数据失败:', error);
  }
};

const chart = ref();
// 配置 ECharts 的选项

const option = reactive({
  tooltip: {
    trigger: "axis"
  },
  legend: {
    top: "0%",
    data: ["个人成绩", "专业平均成绩"],
    textStyle: {
      color: "rgba(255,255,255,.5)",
      fontSize: "12"
    }
  },

  grid: {
    left: "10",
    top: "30",
    right: "10",
    bottom: "10",
    containLabel: true
  },
  xAxis: [
    {
      type: "category",
      boundaryGap: false,
      // x轴更换数据
      data: [
        "大一上", "大一下", "大二上", "大二下", "大三上", "大三下"
      ],
      // 文本颜色为rgba(255,255,255,.6)  文字大小为 12
      axisLabel: {
        color: "rgba(255,255,255,.6)",
        fontSize: 12
      },
      // x轴线的颜色为   rgba(255,255,255,.2)
      axisLine: {
        lineStyle: {
          color: "rgba(255,255,255,.2)"
        }
      }
    }
  ],
  yAxis: [
    {
      type: "value",
      axisTick: { show: false },
      axisLine: {
        lineStyle: {
          color: "rgba(255,255,255,.1)"
        }
      },
      axisLabel: {
        color: "rgba(255,255,255,.6)",
        fontSize: 12
      },
      // 修改分割线的颜色
      splitLine: {
        lineStyle: {
          color: "rgba(255,255,255,.1)"
        }
      }
    }
  ],
  series: [
    {
      name: "个人成绩",
      type: "line",
      smooth: true,
      // 单独修改当前线条的样式
      lineStyle: {
        color: "#0184d5",
        width: "2"
      },
      // 填充颜色设置
      areaStyle: {
        color: new echarts.graphic.LinearGradient(
          0,
          0,
          0,
          1,
          [
            {
              offset: 0,
              color: "rgba(1, 132, 213, 0.4)" // 渐变色的起始颜色
            },
            {
              offset: 0.8,
              color: "rgba(1, 132, 213, 0.1)" // 渐变线的结束颜色
            }
          ],
          false
        ),
        shadowColor: "rgba(0, 0, 0, 0.1)"
      },
      // 设置拐点
      symbol: "circle",
      // 拐点大小
      symbolSize: 8,
      // 开始不显示拐点， 鼠标经过显示
      showSymbol: false,
      // 设置拐点颜色以及边框
      itemStyle: {
        color: "#0184d5",
        borderColor: "rgba(221, 220, 107, .1)",
        borderWidth: 12
      },
      data: [
        0,
        0,
        0,
        0,
        0,
        0,
      ]
    },
    {
      name: "专业平均成绩",
      type: "line",
      smooth: true,
      lineStyle: {
        color: "#00d887",
        width: 2

      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(
          0,
          0,
          0,
          1,
          [
            {
              offset: 0,
              color: "rgba(0, 216, 135, 0.4)"
            },
            {
              offset: 0.8,
              color: "rgba(0, 216, 135, 0.1)"
            }
          ],
          false
        ),
        shadowColor: "rgba(0, 0, 0, 0.1)"
      },
      // 设置拐点 小圆点
      symbol: "circle",
      // 拐点大小
      symbolSize: 5,
      // 设置拐点颜色以及边框
      itemStyle: {
        color: "#00d887",
        borderColor: "rgba(221, 220, 107, .1)",
        borderWidth: 12
      },
      // 开始不显示拐点， 鼠标经过显示
      showSymbol: false,
      data: [
        0,
        0,
        0,
        0,
        0,
        0,
      ]
    }
  ]
});
onMounted(() => {
  const myChart = echarts.init(chart.value)
  myChart.setOption(option)
  window.addEventListener('resize', () => {
    myChart.resize()
  })
})

</script>

<style lang="less" scoped></style>